<template>
	<view class="mydetail-body">
		<view class="tn-flex tn-flex-row-center tn-margin-bottom-sm tn-padding-top-sm">
			<view class="justify-content-item">
				<text @touchend="getNextDate(-1)">上一天</text>
			</view>
			<view class="justify-content-item tn-flex-1 tn-text-center">
				<text class="tn-padding-right-sm" @click="showcalFunction">{{dangqianriqi}}</text><text>{{xingqiji}}</text>
			</view>
			<view class="justify-content-item">
				<text @touchend="getNextDate(1)">下一天</text>
			</view>
		</view>
		<view class="tn-padding-top-sm">
			<!-- <view class="">共{{notCheckTotal}}人未签到</view> -->
			<tn-tabs v-if="scrollList.length" :list="scrollList" :current="currentTab" :showBar="false" @change="tabChange"></tn-tabs>
			<text class="tn-padding-sm" v-else>当前无班级选择</text>
			<!-- <view class="">共{{youerList.length}}人未签到</view> -->
			<view class="tn-margin-top-sm" v-if="youerList.length">
				<tn-list-cell v-for="(item,index) in youerList" :key="index" :name="index">
				    <view class="tn-flex tn-flex-direction-column ">
				      <view class="justify-content-item tn-flex-1 mb5 color-red">
						  <text>{{item.childName}}</text> <text v-if="item.inAttendanceTime">（人脸）</text>
						  <text class="color-red" v-else>（无记录）</text>
						  <text v-show="item.inAttendanceTime">{{item.inAttendanceTime}}</text>  <text v-show="item.inAttendanceTime">入园</text> 
					  </view>
					  <view class="justify-content-item tn-flex-1 mb5 color-red">
						  <text>{{item.childName}}家长</text> <text v-if="item.inAttendanceTime1">（刷卡）</text>
						  <text class="color-red" v-else>（未刷卡）</text>
						  <text v-show="item.inAttendanceTime1">{{item.inAttendanceTime1}}</text>  <text v-show="item.inAttendanceTime1">入园</text> 
					  </view>
					  <view class="justify-content-item tn-flex-1">
						  <text>{{item.childName}}家长</text> <text v-if="item.outAttendanceTime">（刷卡）</text>
						  <text class="color-red" v-else>（未刷卡）</text>
						  <text v-show="item.outAttendanceTime">{{item.outAttendanceTime}}</text>  <text v-show="item.outAttendanceTime">离园</text> 
					  </view>
				    </view>
				</tn-list-cell>
			</view>
			<view v-else> <tn-empty mode="data"></tn-empty></view>
		</view>
		
		<tn-toast
		  ref="toast"
		></tn-toast>
		
		<tn-calendar
		  v-if="showcalendar"
		  v-model="showcalendar"
		  mode="date"
		  :changeYear="false"
		  @change="onChange"
		></tn-calendar>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				activeName: 1,
				shangwuTable: [],
				shangwuInfo:{},
				xiawuTable: [],
				xiawuInfo:{},
				scrollList: [],
				currentTab: 0,
				youerList: [],
				classId: '',
				genders:{
					0: '未知',
					1: '男',
					2: '女'
				},
				xingqiji: '',
				dangqianriqi: '',
				notCheckTotal: 0,
				showcalendar:false,
			}
		},
		mounted() {
			this.getbanjiFenlei();
			this.getxingqi(new Date().getDay())
			this.getDay(new Date())
		},
		methods: {
			getweiqiandao(){
				// this.dangqianriqi = '2023-08-25'
					this.request({
						url: '/ChildAttendance/GetClassAttendance',
						method: 'get',
						params: {
							ClassId: this.classId,
							AttendanceTime: this.dangqianriqi
						},
					}).then(res => {
						if(res.code == 200){
							this.youerList = res.data.rows;
						}
					})
			},
			onChange(event){
				console.log(event, event.date)
				this.dangqianriqi = event.date
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				this.getweiqiandao();
			},
			changeActiveTab(index){
				this.activeName = index;
			},
			tabChange(index){
				this.currentTab = index;
				this.classId = this.scrollList[this.currentTab].id;
				this.getweiqiandao();
			},
			showcalFunction(){
				this.showcalendar = true
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.scrollList = res.data;
						if(this.scrollList.length){
							this.classId = this.scrollList[0].id;
							// this.getChildrens();
							this.getweiqiandao();
						}
					}
				})
			},
			getDay(dd){
				let y = dd.getFullYear();
			　　let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				this.dangqianriqi = y+'-'+m+'-'+d;
			},
			getxingqi(week){
				let str = ''
				if (week == 0) {  
				        str = "星期日";  
				} else if (week == 1) {  
				        str = "星期一";  
				} else if (week == 2) {  
				        str = "星期二";  
				} else if (week == 3) {  
				        str = "星期三";  
				} else if (week == 4) {  
				        str = "星期四";  
				} else if (week == 5) {  
				        str = "星期五";  
				} else if (week == 6) {  
				        str = "星期六";  
				}
				this.xingqiji = str;
			},
			getNextDate(day) { 
				let date = this.dangqianriqi;
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			　　this.dangqianriqi = y + "-" + m + "-" + d;
			
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				this.getweiqiandao();
			},
			getChildrens(){
				this.youerList = [];
					this.request({
						url: '/Children/MobilePage',
						method: 'get',
						params: {
							pageNo: 1,
							pageSize: 50,
							ClassId: this.classId,
						},
					}).then(res => {
						if(res.code == 200 && res.data){
								let rows = res.data.rows;
								rows.forEach(item => {
									this.youerList.push(item);
								})
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: res.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
					})
			},
			qiandaofunction(item){
				
					this.request({
						url: '/ChildAttendance/ManualCheck',
						method: 'post',
						params: {
							childId: item.id,
							date: this.dangqianriqi
						},
					}).then(res => {
						if(res.code == 200){
							this.getweiqiandao();
							
							this.$refs.toast.show({
									    title: '',
									    content: '签到成功',
									    icon: 'success',
									    image: '',
									    duration: 1000,
										})
						}
					})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.mydetail-body{
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		overflow-y: auto;
		padding: 10px;
	}
	.tab-view-container{
		overflow: hidden;
		
	}
	.qiandao-view{
		background-color: rgba(242, 242, 242, 1);
		padding: 14rpx 40rpx;
	}
	.activeTab{
		background-color: rgba(202, 249, 130, 1);
	}
	.row-tb{
		border-bottom: 1px solid #dddddd;
		.tb-row-cl{
			padding: 10rpx;
			width: 25%;
			text-align: center;
		}
		.right-line{
			border-right: 1px solid #dddddd;
		}
	}
	.zongji-row{
		background-color: rgba(215, 215, 215, 1);
	}
	.color-red{
		color: #ff0000;
	}
	.mb5{
		margin-bottom: 10rpx;
	}
</style>